<template>
  <div class="module">
      <div class="menu-top">
          <div class="menu-left">
          <div v-for="(menu,index) in topLeftMenu" :key="index" class="menu-div" :class="menu.show ? 'menu-choice':''" @click="choiceMenu(menu)">{{ menu.label }}</div>
          </div>
          <div class="menu-right">
          <div title="返回首页" class="menu-btn homeBg" @click="returnHome()"></div>
          </div>
    </div>
    <div class="mine-content">
      <mine-tree-card-child v-show="menuNow.id == 1 && menuNow.show" @closeMineTree="closeModel"></mine-tree-card-child>
      <mineScore v-if="menuNow.id == 2 && menuNow.show" @closeScore="closeModel"></mineScore>
      <DeviceOperation v-if="menuNow.id == 4 && menuNow.show" @closeDevice="closeModel"  :gnss="gnssList" :video="videoList" :dust="dustList"></DeviceOperation>
      <earlyWarningStatistics v-if="menuNow.id == 5 && menuNow.show" @closeWarning="closeModel"></earlyWarningStatistics>
      <riskStatistics v-if="menuNow.id == 6 && menuNow.show" @closerisk="closeModel"></riskStatistics>
    </div>
  <MineChildMonitorDialog ref="mineChildMonitorDialogRef" @monitorClose="closeModel"></MineChildMonitorDialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { emitter } from "@/utils/events";
import { getDeviceByMineNo } from "@/api/situation";
import mapUtil from "./profile/map";
import MineTreeCardChild from "@/components/MineTreeCard/MineTreeCardChild"; // 矿山名录
import DeviceOperation from '@/components/overviewComponent/deviceOperation.vue'// 设备概况
import earlyWarningStatistics from '@/components/overviewComponent/earlyWarningStatistics.vue'
import riskStatistics from '@/components/overviewComponent/riskStatistics.vue'
import mineScore from '@/components/overviewComponent/mineScore.vue'
import MineChildMonitorDialog from '@/components/MineMonitorDialog/MineChildMonitorDialog.vue'
import useOnemapStore from "@/store/modules/onemap";
const onemapStore = useOnemapStore();
const { proxy } = getCurrentInstance();

const topLeftMenu = ref([
{id: 1, label: '矿山名录', show: false},
{id: 2, label: '矿山评分', show: false},
{id: 3, label: '矿区监控', show: false},
{id: 4, label: '设备运行状态', show: false},
{id: 5, label: '预警统计', show: false},
{id: 6, label: '风险统计', show: false},
{id: 7, label: '综合监测报告', show: false},
])
const menuNow = ref({})
const gnssList = ref([])
const videoList = ref([])
const dustList = ref([])
const pm10T = ref(0);
const pm25T = ref(0);
const noiseT = ref(0);
// 监听地图是否加载完毕 mapOnload-当前页面路由name
let mapInstance, map3dUtil; // 量算函数
emitter.once("mapOnload", (map) => {
  mapInstance = map;
  map3dUtil = new mapUtil(mapInstance);
});

onActivated(() => {
  // 再次打开页面时在这里初始化地球中的内容
  console.log("iot组件被激活");
  if (onemapStore.currentOpenPitInfo.openPitNo) { 
    getDeviceAdd()
  }
  console.log("map3dUtil",map3dUtil)
});

onDeactivated(() => {
  // 在这里清除本页面地图中的的加载内容
  console.log("iot组件被停用");
  map3dUtil.clearIotGroupLayer()
  topLeftMenu.value.forEach(menu=>{
    menu.show = false
  })
});
watch(
  () => onemapStore.currentOpenPitInfo.openPitNo,
  (newValue, oldValue) => {
    // 监听到切换矿山
    setTimeout(()=>{
      getDeviceAdd()
    },1000)
  }
);
// menu切换
function choiceMenu(menu) {
  if (!onemapStore.currentOpenPitInfo.openPitNo && menu.id != 1) {
    ElMessage({
      showClose: true,
      message: '请先选择矿山',
      type: 'warning',
    })
  } else {
    topLeftMenu.value.forEach(item => {
      if (menu.id == item.id) {
        item.show = !menu.show
      } else {
        item.show = false
      }
    });
    if(menu.id == 3) {
      proxy.$refs["mineChildMonitorDialogRef"].show();
      menuNow.value = {}
      return
    }
    menuNow.value = menu
  }
}
// 关闭模态框
function closeModel(id) {
  if (menuNow.value.id == id) {
    menuNow.value.show = false
    topLeftMenu.value.forEach(item => {
      if (id == item.id) {
        item.show = false
      }
    });
  }
}
// 获取设备列表并加载
function getDeviceAdd() {
  const params = {
    openPitNo: onemapStore.currentOpenPitInfo.openPitNo,
    equipType: ['02','132','08'],
  }
  getDeviceByMineNo(params).then(res=>{
    if (res.code == 200) {
      console.log("res",res.data)
      gnssList.value = []
      videoList.value = []
      dustList.value = []
      map3dUtil.claerDeviceLayer()
      res.data.forEach(item=>{
        if (item.equipType == '02') {
          gnssList.value.push(item)
          map3dUtil.loadGnssData(item)
        } else if (item.equipType == '132') {
          videoList.value.push(item)
          map3dUtil.loadVideoData(item)
        } else {
          dustList.value.push(item)
          map3dUtil.loadDustData(item, pm10T.value, pm25T.value, noiseT.value)
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.module {
height: 100%;
display: flex;
box-sizing: border-box;
padding: 8px;
position: relative;
}
.menu-top {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
>div {
  height: 50px;
}
.menu-left {
  width: 70%;
  display: flex;
  align-items: center;
}
.menu-right {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 5px;
}
.menu-div {
  width: 110px;
  height: 34px;
  background-image: url('@/assets/images/green/menu-child.png');
  background-size: 100% 100%;
  margin-right: 20px;
  line-height: 34px;
  text-align: center;
  color: #eef1fa;
  font-family: PangMen;
  font-size: 16px;
  cursor: pointer;
}
.menu-div:active {
  scale: 0.9;
  background-image: url('@/assets/images/green/menu-child-active.png');
  background-size: 100% 100%;
}
.menu-choice {
  background-image: url('@/assets/images/green/menu-child-active.png');
  background-size: 100% 100%;
}
.menu-btn {
  height: 46px;
  width: 46px;
  cursor: pointer;
  margin-left: 20px;
}
.menu-btn:active {
  scale: 0.9;
}
.areaBg {
  background-image: url('@/assets/images/green/area.png');
  background-size: 100% 100%;
}
.modelBg {
  background-image: url('@/assets/images/green/model.png');
  background-size: 100% 100%;
}
.sarBg {
  background-image: url('@/assets/images/green/sar.png');
  background-size: 100% 100%;
}
.homeBg {
  background-image: url('@/assets/images/green/home-btn.png');
  background-size: 100% 100%;
}
}
.mine-content {
width: 370px;
height: calc(90vh - 100px);
position: absolute;
left: 8px;
top: 60px;
}
</style>